<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts</title>
    <!-- <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>  -->
    <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
您选择了X轴的标签[<span id="xAxisTag"></span>],他的值为[<span id="barValue"></span>]
<input type="submit" name="" value="刷新" onclick="refreshBar()">
</br>
<div id="bar" style="width: 600px;height:400px;float:left;"></div>

<div id="pie" style="width: 400px;height:400px;float:left;"></div>

</body>
<script th:src="@{/assets/js/initbarlinepie.js}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myBarChart = echarts.init(document.getElementById('bar'));

    // 指定图表的配置项和数据
    var option = getSaleOption();
    // 使用刚指定的配置项和数据显示图表。
    myBarChart.setOption(option);


    var myPieChart = echarts.init(document.getElementById('pie'));

    var salePieOption = getSalePieOption();

    refreshPieData(option.xAxis.data[0], option.series[0].data[0]);

    myPieChart.setOption(salePieOption);


    myBarChart.on('click', function (params) {
        //param具体包含的参数见 https://blog.csdn.net/allenjay11/article/details/76033232
        updatePage(params);

        if(params.componentType == "series"){
            refreshPieData(option.xAxis.data[params.dataIndex],params.value);

            myPieChart.setOption(salePieOption);
        }

    });
</script>

<script type="text/javascript"></script>
</html>